<template>
	<view style="width: 100vw;background-color: #FC6A1D;">
		<!--顶部图片 -->
		<view style="width: 100vw;height: 30vh;">
			<image src="/static/images/LbarginActiveImg_02.png" style="width: 100vw;height: 30vh;" mode=""></image>
		</view>

		<!-- 已完成 -->
		<view @click="open"
			style="background-color: #fff; width: 90vw;margin-left: 5vw;border: solid 1px orange;height: 35vh;margin-top: 2vh; border-radius: 15px 15px 0px 0px;">
			<!-- 类型 -->
			<view
				style="width: 90.3vw;height: 6vh;color: #fff; text-align: center;line-height: 6vh; background-color: #FEBF12;border-radius: 15px 15px 0px 0px">
				已完成
			</view>
			<!-- 商品内容 -->
			<view style="width: 90vw;height: 29vh;display: flex;">
				<view style="width: 40vw;height: 29vh;">
					<image src="/static/images/LKongqizhaguo.png" style="width: 34vw;height: 26vh;margin-left: 2vw;"
						mode=""></image>
				</view>
				<!-- 右侧 -->
				<view style="width: 50vw;height: 29vh;">
					<view
						style="margin-top: 3vh; width: 50vw;height: 8vh;font-size: 0.9rem;color: #CC3300;line-height: 8vh;">
						恭喜你
					</view>
					<!-- 内容-->
					<view style="margin-top: 5vh;font-size: 0.8rem;">
						砍成一台压力锅，宝贝正在打包，请注意查收
					</view>
				</view>
			</view>
		</view>
		<!-- 其他内容 -->
		<view style="width: 100vw;background-color: #FB6317;margin-top: 2vh;">
			<view
				style="display: flex;justify-content: space-around;flex-wrap: wrap; padding-top: 2vh;width: 92vw;margin-left: 4vw;background-color: #FEDFB4;border-radius: 10px;box-shadow: 2px -2px 4px 5px #FAB188; ">
				<!-- 商品信息 -->
				<view
					style="border: solid 1px #FBE4BE; width: 40vw;margin-left: 1vh;background-color: #FFF1DE;border-radius: 10px;"
					v-for="(item,index) in List" :key="index">
					<!-- 已送出多少件 -->
					<view
						style="font-size: 0.6rem;color: #957042;text-align: center;line-height: 5vh;font-weight: bold; width: 25vw;height: 5vh; margin-left: 7vw;background-color: #FDDDAE;border-radius: 0px 0px  20px 20px; ">
						已送出<text style="font-size: 0.8rem;font-weight: bold;color: #D2332E;">11.2万</text>件
					</view>
					<!-- 商品名称 -->
					<view
						style="width: 40vw;text-align: center;height: 8vh;line-height: 8vh;font-size: 1.1rem;font-weight: bold;color: #6A5436;">
						九阳空气炸锅
					</view>
					<!-- 图片 -->
					<view style="width: 40vw;height: 23vh;">
						<image :src="item.img" style="width: 40vw;height: 23vh;" mode=""></image>
					</view>
					<view style="width: 40vw;height: 1vh;background-color:#FDDDB4 ;"></view>
					<!-- 免费拿点击按钮 -->
					<view style="width: 40vw;height: 8vh;background-color: #FDDDB4;">
						<button
							style="width: 34vw;margin-left: 3vw;height: 6vh;border-radius: 25px;color: #fff;text-align: center;line-height: 6vh; background-color: #F53305;">
							点击免费
						</button>
					</view>


				</view>

			</view>


		</view>

		<!-- 弹出框 -->
		<uni-popup ref="popup" type="bottom">
			<!-- 步骤 -->
			<view style="width: 100vw;margin-top: 15vh;">
			<uni-steps active-color="#FF990B"  :options="[{title: ''}, {title: '第二步'}, {title: '免单'}]" :active="1"></uni-steps>
			</view>
			<!-- 第三步 -->
			<view style="width: 100vw;height: 10vh;line-height: 10vh;font-size: 1.2rem;color: #EFE6AC;text-align: center;">
				第三步：仓库发货
			</view>
			<!-- 内容 -->
			<view style="width: 100vw;height: 70vh;background-color: #fff;">
				<view style="width: 100vw;height: 8vh;display: flex;border-bottom: solid 1px #999;">
					<view style="width: 40vw;height: 4vh;padding-top: 3vh;background-color: #fff; text-align: center; margin-top: 2vh;margin-left: 30vw;">
						仓库正在发货
					</view>
					<view style="margin-left: 25vw;font-size: 1.2rem;height: 8vh;line-height: 8vh;">x</view>
				</view>
				<!-- 地址 -->
				<view style="width: 100vw;height: 15vh;border: solid 1px #ccc;display: flex;">
					<view style="width: 8vw;height: 15vh;">
						<image src="/static/images/L401位置.png" style="width: 5vw;height: 4vh;margin-top: 6vh;margin-left: 2vw;" mode=""></image>
					</view>
					<view style="width: 88vw;height: 15vh;margin-left: 1vw;">
						<view style="width: 88vw;margin-top: 2vh;">
							<text style="font-weight: bold;">晶晶</text>
							<text style="margin-left: 2vw;font-size: 0.8rem;">15623987455</text>
						</view>
						<view style="margin-top: 1vh;font-size: 0.9rem;">
							上海市 上海市 奉贤区  上海市 奉贤区 海湾真五四公路3389好 上啊八位和农业
						</view>
					</view>
				</view>
				<!-- 请注意查收 -->
				<view style="margin-left: 3vw;line-height: 8vh;height: 8vh;font-size: 1.1rem;border-bottom: solid 6px #F4F4F4;">请注意查收</view>
				<!-- 类似商品 -->
				<view style="width: 100vw;height: 8vh;font-size: 1rem;font-weight: bold;text-align: center;line-height: 8vh;">
					相似商品推荐
				</view>
				<view style="width: 100vw;height: 20vh;display: flex; ">
					<view style="width: 33vw;height: 20vh;" v-for="(item,index) in XsList" :key="index">
						<image :src="item" style="width: 30vw;margin-left: 2vw; height: 20vh;" mode=""></image>
					</view>
				</view>
				<!-- 免费拿按钮 -->
				<view style="border-radius: 25px;margin-top: 1vh; background-color: #E02E24; width: 90vw;margin-left: 5vw;height: 6vh;line-height: 6vh;text-align: center;font-size: 0.9rem;color: #fff;">
					选择该商品，开始免费拿
				</view>
				
				
			</view>
			
		</uni-popup>





	</view>
</template>

<script>
	// import progress from'components/ai-progress/ai-progress.vue'
	export default {
		data() {
			return {
				List: [{
						img: '/static/images/LKongqizg.png',
						title: '九阳空气炸锅'
					},
					{
						img: '/static/images/LKongqizg.png',
						title: '九阳空气炸锅'
					},
					{
						img: '/static/images/LKongqizg.png',
						title: '九阳空气炸锅'
					},
				],
				XsList:[
					'/static/images/Lxs.png','/static/images/Lxs.png','/static/images/Lxs.png',
				]
			}
		},
		components: {

		},
		methods: {
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('top')
			}
		}
	}
</script>

<style>
</style>
